var thumbs = new Array();
var n_thumbs;
var thumb_images;
var new_thumb;

var t_index = 0;
         
function loadSpinner(stitchid) {
  n_thumbs = Math.floor((document.getElementById('spinner').clientWidth / 52) - 3);
  getImgs(stitchid, n_thumbs, document.getElementById('searchstr').value);
}

function build() {
  var node = document.getElementById("spinner");
  if(node.hasChildNodes()) {
    while(node.childNodes.length >= 1 ) {
      node.removeChild(node.firstChild);
    }
  }
  create_spinner(node);
}

function create_spinner(spinner) {

  // create left spinner
  var spinleft_img = document.createElement("img");
  var spinleft_link = document.createElement("a");
  
  spinleft_img.setAttribute("src", "style/left-spin.png");
  spinleft_img.className = "spinbtn";
  spinleft_link.setAttribute("onclick", "return false");
  spinleft_img.onclick = spin_left;
  spinleft_link.href = "#";
  
  spinleft_link.appendChild(spinleft_img);
  spinner.appendChild(spinleft_link);
  
  for(var i=0; i<n_thumbs; i++) {
    if(i >= thumb_images.length) {
      break;
    }
  
    var thumb_link = document.createElement("a");
    var thumb_img = document.createElement("img");
    
    thumb_img.className = "thumbimg";
    thumb_img.setAttribute("stitchid", thumb_images[i].id);
    thumb_img.setAttribute("src", thumb_images[i].img);
    thumb_img.setAttribute("alt", thumb_images[i].title);
    thumb_img.setAttribute("title", thumb_images[i].title);
    thumb_img.setAttribute("onclick", "changeImage( " + thumb_images[i].id + ", '" + thumb_images[i].src + "' );");
    thumb_link.href = "#";
    thumb_link.setAttribute("onclick", "return false");
    
    thumb_link.appendChild(thumb_img);
    spinner.appendChild(thumb_link);
    
    thumbs[i] = thumb_img;
  }
  
  
  // create right spinner
  var spinright_img = document.createElement("img");
  var spinright_link = document.createElement("a");
  
  spinright_img.setAttribute("src", "style/right-spin.png");
  spinright_img.className = "spinbtn";
  spinright_link.setAttribute("onclick", "return false");
  spinright_img.onclick = spin_right;
  spinright_link.href = "#";
  
  spinright_link.appendChild(spinright_img);
  spinner.appendChild(spinright_link);
}

function changeImage(stitchid, src) {
    setSeadragonImage(stitchid, src);
} 
         
function spin_right() {
  getNextImg(thumbs[thumbs.length - 1].attributes["stitchid"].value, true, document.getElementById('searchstr').value, onFetchedRight);
}

function onFetchedRight() {
  if(new_thumb == null) {
    return;
  }

  for(var i=0; i<thumbs.length - 1; i++) {
    thumbs[i].setAttribute("stitchid", thumbs[i+1].attributes["stitchid"].value);
    thumbs[i].attributes["src"].value = thumbs[i+1].attributes["src"].value;
    thumbs[i].attributes["alt"].value = thumbs[i+1].attributes["alt"].value;
    thumbs[i].attributes["title"].value = thumbs[i+1].attributes["title"].value;
    thumbs[i].attributes["onclick"].value = thumbs[i+1].attributes["onclick"].value;
  }
  thumbs[thumbs.length - 1].setAttribute("stitchid", new_thumb.id);
  thumbs[thumbs.length - 1].attributes["src"].value = new_thumb.img;
  thumbs[thumbs.length - 1].attributes["alt"].value = new_thumb.title;
  thumbs[thumbs.length - 1].attributes["title"].value = new_thumb.title;
  thumbs[thumbs.length - 1].attributes["onclick"].value = "changeImage( " + new_thumb.id + ", '" + new_thumb.src + "' )";
}

function spin_left() {
  getNextImg(thumbs[0].attributes["stitchid"].value, false, document.getElementById('searchstr').value, onFetchedLeft);
}

function onFetchedLeft() {
  if(new_thumb == null) {
    return;
  }

  for(var i=thumbs.length - 2; i>=0; i--) {
    thumbs[i+1].setAttribute("stitchid", thumbs[i].attributes["stitchid"].value);
    thumbs[i+1].attributes["src"].value = thumbs[i].attributes["src"].value;
    thumbs[i+1].attributes["alt"].value = thumbs[i].attributes["alt"].value;
    thumbs[i+1].attributes["title"].value = thumbs[i].attributes["title"].value;
    thumbs[i+1].attributes["onclick"].value = thumbs[i].attributes["onclick"].value;
  }
  thumbs[0].setAttribute("stitchid", new_thumb.id);
  thumbs[0].attributes["src"].value = new_thumb.img;
  thumbs[0].attributes["alt"].value = new_thumb.title;
  thumbs[0].attributes["title"].value = new_thumb.title;
  thumbs[0].attributes["onclick"].value = "changeImage( " + new_thumb.id + ", '" + new_thumb.src + "' )";
}

function filterScroller(str) {
  getImgs(stitchid, n_thumbs, str);
}

